<template>
    <view>
        <view class="list wap" v-if="Array.isArray(list) && list.length > 0">

            <view class="listBox" v-for="(item, index) in list" :key="index"
                @click="nav_to('/pages/teacher/detail?id=' + item.ID)">
                <view class="leftbox">
                    <image :src="item.UserImgs" class="hdimg" mode="aspectFill"></image>
                    <!-- <image v-if="item.Level == '网红'" class="level"
                        src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720434183138387.png"
                        mode="widthFix">
                    </image> -->

                </view>
                <view class="rightbox">
                    <view class="namebox">
                        <view class="name hiddenText">{{ item.Name }}</view>
                        <view class="addrebox">
                            <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png"
                                class="addimg"></image>
                            <text class="Place">{{ item.City || '未知' }}</text>
                        </view>
                    </view>
                    <view class="flexbox">
                        <text class="title_2">用户ID：</text>
                        <text class="title_2">{{ item.ID || '' }}</text>
                    </view>
                    <view class="flexbox">
                        <text class="title_2">性别：</text>
                        <text class="title_2">{{ item.Sex || '' }}</text>
                    </view>
                    <view class="flexbox">
                        <text class="title_2">上次登录时间：</text>
                        <text class="title_2">{{ getTime(item.UpdateTime)}}</text>
                    </view>
                    <view class="flexbox">
                        <text class="title_2">电话：</text>
                        <text class="title_2">{{ item.Phone || '暂无' }}</text>
                        <image v-if="item.Phone" style="margin-left: 20rpx;" class="rimg"
						src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716976610435205.png" mode="widthFix" @click.stop="callNumber(item.Phone)">
					</image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
data() {
return {
    PageIndex: 1,
    PageSize: 10,
    list:[],
};
},
onLoad(){
    this.getPageList()
},
onReachBottom(){
    this.PageIndex++
    this.getPageList()
},
methods: {
    async getPageList(){
        let res = await this.$api.post('Member/PageList',{
            PageIndex:this.PageIndex,
            PageSize:this.PageSize,
            UserActiveStatus: '活跃',
        })

        if (this.PageIndex == 1) {
          this.list = res.data;
        } else {
          let list = this.list.concat(res.data);
          this.list = this.clearRepetition(list, "ID");
        }
    },

    // 去重
    clearRepetition(arr, key = "id") {
      let newArr = [];
      arr.forEach((item) => {
        let index;
        let check = newArr.every((newItem, i) => {
          if (item[key] !== newItem[key]) {
            index = -1;
            return true;
          } else {
            index = i;

            return false;
          }
        });
        if (check) {
          newArr.push(item);
        } else {
          newArr.splice(index, 1, item);
        }
      });

      return newArr;
    },
},
}
</script>
<style lang='scss'>
.friends {
    background: #f9f9f9;
    padding-bottom: 80rpx;
    /deep/ .uni-list-chat {
        background: #111;
    }

    /deep/ .uni-list--border-top {
        background: #333;
    }

    /deep/ .uni-list--border-top {
        background: #333;
    }

    /deep/ .uni-list-chat__content-title {
        color: #fff;
    }

    /deep/ .uni-list-chat__content-note {
        color: #eee;
    }

    /deep/ .uni-list-chat__header-image {
        border-radius: 50%;
    }

    /deep/ .uni-list-chat__header {
        border: none;
    }
}

.item {
    position: relative;
    height: 150rpx;
    align-items: center;
    // border-bottom: 1px solid #fff;
}

.cover {
    position: relative;
    height: 100rpx;
    width: 100rpx;
    background: #444;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }

    .red {
        display: flex;
        height: 20rpx;
        width: 20rpx;
        background: #fc4b65;
        position: absolute;
        top: 5rpx;
        right: 5rpx;
        border-radius: 200rpx;
    }
}

.hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ft {
    margin-top: 10rpx;
}

.nav {
    height: 44px;

    .nav_left {
        margin-top: 7px;
        height: 30px;
        line-height: 30px;
        font-size: 32rpx;
        color: #fff;
        width: 200rpx;
        display: flex;
        align-items: center;

        // justify-content: center;
        text {
            padding-left: 10rpx;
            font-size: 32rpx;
            color: #fff;
            font-weight: bold;
        }
    }
}

.c1 {
    color: #333;
}

.c2 {
    color: #999;
}

.btnBox {
    display: flex;
    align-items: center;

    .btn_ {
        margin-left: 16rpx;
        font-size: 20rpx;
        color: #333333;
        padding: 10rpx 32rpx;
        border-radius: 50rpx;
        border: 2rpx solid #E4E4E4;
        min-width: 100rpx;
    }

    .btn_soild {
        color: #fff;
        background: #706EEE;
        border: 2rpx solid #706EEE;
    }
}

.listBox {
    width: 702rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin: 0 auto;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;

    .leftbox {
        width: 204rpx;
        height: 256rpx;
        position: relative;
        // margin: 24rpx 22rpx 0 30rpx;
        margin-right: 22rpx;

        .status {
            width: 90rpx;
            height: 32rpx;
            background: #F4822E;
            border-radius: 0rpx 16rpx 0rpx 16rpx;
            text-align: center;
            line-height: 32rpx;
            color: #fff;
            font-size: 22rpx;
            position: absolute;
            top: 0;
            right: 0;
        }

        .hdimg {
            width: 100%;
            height: 100%;
            background-color: #706eee;
            border-radius: 18rpx;
        }

        .level {
            width: 72rpx;
            height: 72rpx;
            position: absolute;
            top: 0;
            left: 0;
        }

        .evaluabox {
            width: 100%;
            height: 44rpx;
            background-color: rgba(255, 255, 255, 0.85);
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            border-radius: 0 0 16rpx 16rpx;

            .title {
                color: #333333;
                font-size: 20rpx;
                margin: 0 12rpx;
            }

            .xing {
                width: 20rpx;
                height: 20rpx;
                margin-right: 4rpx;
            }
        }
    }

    .rightbox {
        flex: 1;
        padding-right: 10rpx;
        box-sizing: border-box;

        .namebox {
            display: flex;
            align-items: center;

            .name {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
                margin-right: 8rpx;
                max-width: 250rpx;
            }

            .level {
                width: 80rpx;
                // height: 32rpx;
                border-radius: 8rpx;
                border: 2rpx solid #FF7713;
                text-align: center;
                // line-height: 32rpx;
                color: #FF7108;
                font-size: 26rpx;
                margin-right: auto;
                white-space: nowrap;
            }

            .addrebox {
                display: flex;
                align-items: center;

                .addimg {
                    width: 32rpx;
                    height: 32rpx;
                }

                .Place {
                    color: #666666;
                    font-size: 24rpx;
                    white-space: nowrap;
                }
            }

        }

        .flexbox {
            display: flex;
            // align-items: center;
            margin-top: 12rpx;

            .title_2 {
                color: #666666;
                font-size: 24rpx;

                &:first-child {
                    min-width: 72rpx;
                }
            }
            .rimg{
                width: 32rpx;
                height: 32rpx;
            }
        }

        .flexbox_2 {
            display: flex;
            align-items: center;
            margin-top: 22rpx;

            .pricebox {
                display: flex;
                align-items: center;
                margin-right: auto;

                .price {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #FC201C;
                    margin-right: 6rpx;
                }

                .unit {
                    font-size: 24rpx;
                    color: #FC201C;
                }
            }

            .bookbtn {
                width: 136rpx;
                height: 60rpx;
                border-radius: 8rpx;
                background-color: #706eee;
                font-size: 24rpx;
                font-weight: bold;
                color: #fff;
                text-align: center;
                line-height: 60rpx;
            }
        }
    }
}
</style>